import type { PropType } from "vue";
import type { IconClass } from "../../types";
import { computed, defineComponent, inject, ref } from "vue";
import { $t } from "@/plugins/i18n";
import { SYMBOL_SET_TABLE_SIZE, SYMBOL_TABLE_SIZE } from "../../types";

interface Props {
    iconClass: IconClass;
}

export default defineComponent((props: Props) => {
    const tableSize = inject(SYMBOL_TABLE_SIZE)!;
    const setTableSize = inject(SYMBOL_SET_TABLE_SIZE)!;

    /** 是否显示尺寸设置弹出框 */
    const showSizePopover = ref(false);

    const options = [
        { label: computed(() => $t("button.small")), value: "small" },
        { label: computed(() => $t("button.default")), value: "default" },
        { label: computed(() => $t("button.large")), value: "large" },
    ];

    return () => (
        <el-popover
            placement="right"
            trigger="click"
            v-model:visible={showSizePopover.value}
        >
            {{
                reference: () => (
                    <span
                        class={`icon-[ri--line-height] ${props.iconClass}`}
                        v-tippy={{ content: $t("button.size") }}
                    />
                ),
                default: () => (
                    <div class="space-y-2">
                        <div class="mb-3 pb-2 border-b border-solid border-[var(--el-border-color-light)]">
                            <span class="font-medium text-sm">{$t("button.size")}</span>
                        </div>
                        {/* Note[tsx]: tsx实现双向绑定需要通过props传递, emit 定义 "update:modelValue", 不能使用 definedModel 语法糖  */}
                        <el-segmented
                            modelValue={tableSize.value}
                            onUpdate:modelValue={setTableSize}
                            options={options}
                            direction="vertical"
                            style="width: 100%;"
                        >
                        </el-segmented>
                    </div>
                ),
            }}
        </el-popover>
    );
}, {
    name: "SetSize",
    props: {
        iconClass: {
            type: String as PropType<IconClass>,
            required: true,
        },
    },
});
